/**
 * 带日期区间的工具条
 * @param {[type]} dispatch  [description]
 * @param {[type]} begindate [description]
 * @param {[type]} enddate   [description]
 * @param {[type]} value     [description]
 */

import React  from 'react'
import {Row,Col,Input,Radio,DatePicker} from 'antd'
import moment from 'moment'
import style from './index.less'

const Search = Input.Search;
const {  RangePicker } = DatePicker;


const ToolbarWithRangePicker=({
		dispatch,
		begindate,
		enddate,
		dataDate,
		filterValue,
		keywords,
		location,
		style,
		tag
	})=>{
	const dateFormat = 'YYYY-MM-DD',format='YYYY-MM-DD';
	const data=[
		{
			name:'一天内',
			value:'1'
		},
		{
			name:'一周内',
			value:'2'
		},
		{
			name:'一个月内',
			value:'3'
		},
		{
			name:'全部',
			value:'0'
		}
	]
  const onChangeKeywords=value => {
    dispatch({
			type:`${tag}/changeRouter`,
			payload:{
				pathname:location.pathname,
        query:{
          filterValue,
          begindate,
          enddate,
          keywords:value
        }
			}
		})
  }
	const onRadioGroupChange=(e)=> {
    const value=e.target.value
    let start=moment(dataDate).format(dateFormat),end=moment(dataDate).format(dateFormat)
    switch(value){
      case '1':start=moment(dataDate).format(dateFormat);break;
      case '2':start=moment(dataDate).subtract(6, "days").format(dateFormat);break;
      case '3':start=moment(dataDate).subtract(1,"months").add(1, "days").format(dateFormat);break;
      case '0':start='2017-01-01';break;
    }

    dispatch({
			type:`${tag}/changeRouter`,
			payload:{
				pathname:location.pathname,
        query:location.query.trader?{
					trader:location.query.trader,
          filterValue:value,
          begindate:start,
          enddate:end,
          keywords
        }:{
          filterValue:value,
          begindate:start,
          enddate:end,
          keywords
        }
			}
		})

	}
  const onChangeRangePicker=(dates)=>{
    dispatch({
			type:`${tag}/changeRouter`,
			payload:{
				pathname:location.pathname,
				query:location.query.trader?{
					trader:location.query.trader,
					begindate:dates[0]&&dates[0].format(dateFormat)||'',
          enddate:dates[1]&&dates[1].format(dateFormat)||'',
          keywords
        }:{
					begindate:dates[0]&&dates[0].format(dateFormat)||'',
          enddate:dates[1]&&dates[1].format(dateFormat)||'',
          keywords
        }
			}
		})
  }
  return(
    <Row type="flex" justify="space-between" style={style||{}}>
			{keywords!=undefined?<Col >
        <Search
          placeholder="查找交易员"
          onSearch={onChangeKeywords}
          style={{ width: 150,marginRight:10 }}
        />
      </Col>:null}

      <Col>
        <RangePicker
  				value={begindate?[moment(begindate), moment(enddate)]:false}
  				format={format}
          onChange={onChangeRangePicker}
          style={{width:240,textAlign:'center'}}
					allowClear={false}
  			/>
  			<Radio.Group value={filterValue} onChange={onRadioGroupChange} style={{marginLeft:10}}>
  				{
  					data.map((item,i)=><Radio.Button value={item.value} key={i}>{item.name}</Radio.Button>)
  				}
  			</Radio.Group>
      </Col>
    </Row>
	)
}
ToolbarWithRangePicker.propTypes={
	// data
}

export default ToolbarWithRangePicker
